html,
body,
#app {
	width: 100%;
	height: 100%;
	position: relative;
	background: url('../img/Bg.jpg') no-repeat center center / 100% 100% ;
}

#app .UpDataIcon {
	width: 3vw;
	position: absolute;
	right: 2vw;
	bottom: 2vh;
	z-index: 1000;
	display: none;
}

#app .UpDataIcon>img {
	width: 100%;
	height: 100%;
	background: red;
}

#app .ActivationBox {
	--ActivationBtnHeight: 6vh;
	width: 90%;
	height: 60%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	grid-template-rows: calc(100% - var(--ActivationBtnHeight)) var(--ActivationBtnHeight);
	grid-template-columns: 100%;
}

#app .ActivationBox .ActivationBtn {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#app .ActivationBox .ActivationBtn>div {
	width: 30vw;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}


#app #liveAlertPlaceholder {
	width: 100%;
	height: 10vh;
	position: absolute;
	top: 0px;
	left: 0px;
	overflow: hidden;
}

#app #liveAlertPlaceholder>div {
	position: absolute;
	left: 50%;
	top: -50%;
	transform: translate(-50%, -50%);
	transition: all .5s;
}

#app #liveAlertPlaceholder>.AlertTextBox {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

#app #liveAlertPlaceholder>div>div {
	--bs-alert-padding-y: 1vh;
	margin: 0px;
	padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
}

#app #liveAlertPlaceholder>.AlertTextBox>.alert {}

#app #liveAlertPlaceholder>.AlertTextBox>.alert>button {
	font-size: 14px;
	padding: 2.8vh;
	box-sizing: border-box;
}

.button {
	padding: 5px 10px;
	box-sizing: border-box;
	font-size: 16px;
	color: #fff;
	background-color: #007bff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.button:hover {
	background-color: #0056b3;
	transform: scale(1.05);
}

.button:active {
	background-color: #004080;
	transform: scale(0.95);
}

.button:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

.textarea-style {
	display: block;
	width: 100%;
	/* 根据需要设置宽度 */
	height: calc(100% - 20px);
	/* 最大宽度，可选 */
	padding: 12px 20px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	/* 边框样式 */
	border-radius: 4px;
	/* 边框圆角 */
	background-color: #f9f9f9;
	/* 背景颜色 */
	color: #333;
	/* 文本颜色 */
	font-size: 16px;
	/* 字体大小 */
	line-height: 1.5;
	/* 行高 */
	transition: border-color 0.3s, box-shadow 0.3s;
	/* 过渡效果 */
}

.textarea-style:focus {
	outline: none;
	/* 移除焦点时的轮廓 */
	border-color: #007bff;
	/* 焦点时边框颜色 */
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
	/* 焦点时的阴影效果 */
}

.textarea-style::placeholder {
	color: #999;
	/* 占位符文本颜色 */
	font-size: 16px;
	/* 占位符文本大小 */
}

#app .IpInputBox {
	width: 70%;
	position: absolute;
	left: 50%;
	top: 30%;
	transform: translate(-50%, 0%);
}

#app .ErrorAlertBox {
	width: 70%;
	position: absolute;
	left: 50%;
	top: 3%;
	transform: translate(-50%, -0%);
	transition: all .8s;
}
#app .ErrorAlertBox.Hidden {
	top:-100%;
}